<template>
	<view>
		<image class="head" src="@/static/hBg.png"></image>

		<uni-card>
			<view style="background-color: white;padding: 50rpx 0;">
				<u-steps current="0">
					<u-steps-item title="预约服务"></u-steps-item>
					<u-steps-item title="交付订阅"></u-steps-item>
					<u-steps-item title="门店服务"></u-steps-item>
				</u-steps>
			</view>
			<!-- 店信息 -->
			<view class="flex border_bottom_line up_bottom">
				<u-icon name="bag" color="blue" size="25"></u-icon>
				<view class="up_left">
					<view class="font_bold font_small">{{shop?shop.shopName:null}}</view>
					<view class="font_light font_smaller">{{shop?(shop.shopArea+shop.shopAddress):null}}</view>
				</view>
			</view>
			<!-- 用户信息 -->
			<view class="flex s_between border_bottom_line up_bottom">
				<view class="flex">
					<u-icon name="account" color="blue" size="25"></u-icon>
					<view class="font_bold font_small">{{person?(person.sysUser?person.sysUser.nickName:null):null}}
					</view>
				</view>
				<view>{{person?(person.sysUser?person.sysUser.phonenumber:null):null}}</view>
			</view>
			<!-- 选择日期 -->
			<u-datetime-picker :show="showDate" v-model="date" mode="datetime" @close="closeDate" @cancel="closeDate"
				@confirm="confirmDate" :closeOnClickOverlay="true" :minDate="Number(new Date())"></u-datetime-picker>
			<view class="flex s_between border_bottom_line up_bottom" @click="getDate">
				<view class="flex">
					<u-icon name="calendar" color="blue" size="25"></u-icon>
					<view class="font_bold font_small">{{form.date ? '预约日期：'+form.date : '选择预约日期'}}</view>
				</view>
				<u-icon name="arrow-right" color="blue"></u-icon>
			</view>
			<!-- 选择车辆 -->
			<view class="flex s_between border_bottom_line up_bottom" @click="showCars = true">
				<view class="flex">
					<u-icon name="car" color="blue" size="25"></u-icon>
					<view class="font_bold font_small">{{form.car ? form.car : '选择车辆'}}</view>
				</view>
				<u-icon name="arrow-right" color="blue"></u-icon>
			</view>
			<view v-if="carList.length > 0">
				<u-picker :show="showCars" :columns="carList" @cancel="showCars = false"
					@confirm="confirmCarChoose"></u-picker>
			</view>
			<view class="border_bottom_line">
				<view class="flex s_between">
					<text class="font_bold">服务产品</text>
					<text class="font_small">共选择{{serviceList.length}}项服务项目</text>
				</view>
				<view class="flex s_between" v-for="item in serviceList" :key="item.id">
					<text class="font_smaller">{{item.name}}</text>
					<text class="font_smaller" style="color: coral;">￥{{item.newPrice}}</text>
				</view>
			</view>
			<!-- 选择优惠卷 -->
			<view class="flex s_between border_bottom_line up_bottom" @click="showCoupon=true">
				<view class="flex">
					<u-icon name="coupon" color="blue" size="25"></u-icon>
					<view class="font_bold font_small">{{form.coupon ? form.coupon:'选择优惠卷'}}</view>
				</view>
				<u-icon name="arrow-right" color="blue"></u-icon>
			</view>
			<view v-if="couponList.length > 0">
				<u-picker :show="showCoupon" :columns="couponList" @cancel="showCoupon = false"
					@confirm="confirmCouponChoose"></u-picker>
			</view>
		</uni-card>

		<!-- 底部导航栏 -->
		<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<view class="flex s_between up_bottom up_left up_right" style="width: 750rpx;">
				<view class="flex" @click="showPop">
					<u-icon name="server-man" color="blue" size="25"></u-icon>
					<view class="font_bold font_small">联系客服</view>
				</view>
				<view class="flex up_top up_bottom v_center" style="width: 400rpx;">
					<text class="font_smaller">合计：￥{{total}}</text>
					<u-button style="width: 200rpx;" type="primary" shape="circle" size="small"
						@click="add">提交订单</u-button>
				</view>
			</view>
		</u-tabbar>

		<!-- 弹出框 -->
		<u-popup :show="show" @close="show = false" :round="10">
			<view>
				<view style="display: flex;justify-content: center;"> <text
						style="line-height: 100rpx;font-weight: 600;">{{shop?shop.perPhone:'暂无'}}</text></view>
				<u-button class="up_bottom" type="primary" @click="copy">复制</u-button>
				<u-button class="up_bottom" type="primary" @click="show = false">取消拨号</u-button>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import form from '../../../../uni_modules/uview-ui/libs/config/props/form'
	export default {
		data() {
			return {
				date:null,
				id: null,
				show: false,
				showDate: false,
				orderDetail: null,
				form: {
					date: null,
					carType: null
				},
				list: [{
					title: '买家下单',
					desc: '2018-11-11'
				}],
				actice: 1,
				shop: null,
				person: {},
				serviceList: [],
				total: 0,
				params: {
					pageNum: '',
					pageSize: '',
					shopId: ''
				},
				// >>>>>>选择车辆 >>>>
				showCars: false,
				carId: 0,
				carList: [],
				carTypeList: [],
				carS: [],
				// <<<<<<<<<<<<<<<<<<
				coupon: null,
				couponId: 0,
				showCoupon: false,
				couponList: [
					['减10', '减1']
				],
				couponS: [{
						id: 1,
						name: '减10'
					},
					{
						id: 2,
						name: '减1'
					}
				]
				// <<<<<<<<<<<<<<<<<<
			}
		},
		onLoad(e) {
			// console.log(e.form)
			this.orderDetail = JSON.parse(e.form)
			console.log(this.orderDetail)
			let form = e.form
			// 获取商店数据
			// if (this.orderDetail.id != null) {
			// 	this.params.shopId = this.orderDetail.id
			// 	// this.getById(e.id)
			// 	console.log(this.params.shopId)
			// }
			if (this.orderDetail.data != null) {
				this.shop = this.orderDetail.data
				console.log("门店信息")
				console.log(this.shop)
			}
			// 服务类型信息
			if (this.orderDetail.serviceList != null) {
				this.serviceList = this.orderDetail.serviceList
				console.log(this.serviceList)
			}
			// 价格信息
			if (this.orderDetail.newPrice != null) {
				this.total = this.orderDetail.newPrice
			}
			// 车辆信息
			if (this.orderDetail.car != null) {
				this.car = this.orderDetail.car
			}
			// 获取用户信息
			this.person.id = uni.getStorageSync("userId")
			this.getUserId()
			// 获取车辆信息
			if (this.person.id != null) {
				this.getCarList()
			}

		},
		methods: {
			showPop() {
				this.show = true
			},
			copy() {
				uni.showToast({
					title: '已复制'
				})
				this.show = false
			},
			getDate() {
				console.log('选择日期');
				this.showDate = true
			},
			confirmDate(e) {
				console.log(e)
				let date = new Date(this.date)
				this.form.date = date.getFullYear()+'-'
				+(date.getMonth()+1)+'-'
				+date.getDate()+' '
				+date.getHours()+':'+
				+date.getMinutes()+':00'
				
				this.showDate = false
				console.log(this.form)
			},
			closeDate(){
				this.showDate = false
			},
			add() {
				uni.showToast({
					title: '提交中',
					icon: 'loading'
				})
				let that = this
				// 调用接口
				// 添加订单
				let data = this.setData()
				console.log(data)
				this.$http({
					url: '/api/order/order',
					method: 'POST',
					data: data,
					success(res) {
						console.log(res.data)
						if (res.data.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							})
							let form = {}
							form.id = res.data.data
							setTimeout(uni.navigateTo({
								url: '/pages/yunRang/carMaintainReservation/cmr_success/cmr_success?form=' +
									JSON.stringify(form),
							}), 2000)
						} else {
							uni.showToast({
								title: '提交失败',
								icon: 'error'
							})
						}

					}
				})

			},
			// 设置订单发送的参数
			setData() {
				let data = {}
				data.shopId = this.orderDetail.id
				data.carId = this.carId
				data.userId = this.form.userId ? this.form.userId : 1
				if (this.form.type = '车辆清洗') {
					data.serviceId = 0
				} else {
					data.serviceId = 1
				}
				data.couponId = this.couponId
				data.serviceIds = this.orderDetail.serviceIds
				data.totalPrice = this.orderDetail.oldPrice
				data.realPrice = this.orderDetail.newPrice
				data.subscribeTime = this.form.date
				return data;
			},

			// 获取车辆优惠卷id
			confirmCarChoose(e) {
				this.showCars = false
				console.log(e)
				this.form.car = e.value[0]
				let id = this.getIdByList(this.carS, this.form.car)
				if (id != null) {
					this.carId = id
				}
			},

			confirmCouponChoose(e) {
				this.showCoupon = false
				console.log(e)
				this.form.coupon = e.value[0]
				let id = this.getIdByList(this.couponS, this.form.coupon)
				if (id != null) {
					this.couponId = id
				}
			},

			getIdByList(list, name) {
				if (list == null) {
					return;
				}
				if (list.length == 0) {
					return;
				}
				for (let i of list) {
					if (i.name == name) {
						return i.id;
					}
				}
			},

			getUserId() {
				let that = this
				if (this.person != null && this.person.id != null) {
					this.$http({
						url: '/api/user/userr/getxiangxi/' + this.person.id,
						method: 'GET',
						success(res) {
							// console.log(res.data)
							that.person = res.data.data
							console.log('用户信息：' + that.person.id)
							console.log(that.person)
						}
					})
				}
			},

			getCarList() {
				// 获取汽车类型
				this.getCarTypeList()
				let that = this
				this.$http({
					url: '/api/user/car/list',
					method: 'GET',
					data: {
						userId: that.person.id
					},
					success(res) {
						console.log(res.data)
						// 编辑车辆列表
						if (res.data.code != 200) {
							return;
						}
						let list = res.data.rows
						let carList = []
						for (let i = 0; i < list.length; i++) {
							if (list[i].carNumber != null && list[i].carNumber != '') {
								list[i].name = list[i].carNumber
								carList.push(list[i].carNumber)
							}
						}
						that.carS = list
						that.carList[0] = carList
						console.log(that.carList)
					}
				})
			},
			getCarTypeList() {
				let that = this
				this.$http({
					url: '/api/system/dict/data/type/car_type',
					method: 'GET',
					success(res) {
						console.log(res.data)
						that.carTypeList = res.data.data
					}
				})
			},
			getCouponList() {

			}


		}
	}
</script>

<style scoped lang="scss">
	.head {
		position: absolute;
		z-index: 0;
		width: 100%;
		margin-top: -50rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.s_between {
		justify-content: space-between;
	}

	.v_center {
		align-items: center;
	}

	.border_bottom_line {
		border-bottom: 2rpx solid gray;
	}

	.font_light {
		font-weight: 300;
	}

	.font_bold {
		font-weight: 700;
	}

	.font_small {
		font-size: small;
	}

	.font_smaller {
		font-size: smaller;
	}

	.font_large {
		font-size: large;
	}

	.up_left {
		margin-left: 20rpx;
	}

	.up_bottom {
		margin-bottom: 10rpx;
	}
</style>